<template>
  <div class="dashboard">
    <el-container>
      <el-header>
        <div class="header-content">
          <div class="platform-title">
            <span class="title-text">智慧农业大棚监控平台</span>
            <div class="title-decoration"></div>
          </div>
          <div class="header-center">
            <div class="weather-info">
              <el-icon><Sunny /></el-icon>
              <span>晴 26℃</span>
            </div>
          </div>
          <div class="header-right">
            <div class="datetime">
              <div class="date">{{ currentDate }}</div>
              <div class="time">{{ currentTime }}</div>
            </div>
            <el-select v-model="currentGreenhouseId" @change="handleGreenhouseChange" placeholder="选择大棚" style="width: 7vw">
              <el-option v-for="item in greenhouses" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
        </div>
      </el-header>

      <el-main>
        <!-- 顶部信息卡片区域 -->
        <el-row :gutter="20" class="info-cards">
          <el-col :span="6">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>大棚基本信息</span>
                  <!-- <el-select v-model="currentGreenhouseId" @change="handleGreenhouseChange">
                    <el-option v-for="item in greenhouses" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select> -->
                </div>
              </template>
              <div v-if="currentGreenhouse" class="info-content">
                <p>
                  <el-icon><OfficeBuilding /></el-icon> 大棚名称：{{ currentGreenhouse.name }}
                </p>
                <p>
                  <el-icon><FullScreen /></el-icon> 建筑面积：{{ currentGreenhouse.area }}平方米
                </p>
                <p>
                  <el-icon><Location /></el-icon> 地址：{{ currentGreenhouse.address }}
                </p>
                <p>
                  <el-icon><Monitor /></el-icon> 设备总数：{{ deviceCount }}
                </p>
              </div>
            </el-card>
          </el-col>

          <!-- 实时环境数据 -->
          <el-col :span="18">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>实时环境数据</span>
                  <!-- <el-select v-model="currentSensorId" @change="handleSensorChange" style="width: 10vw">
                    <el-option v-for="device in sensorDevices" :key="device.id" :label="device.deviceName" :value="device.id" />
                  </el-select> -->
                </div>
              </template>
              <el-row :gutter="20" class="env-data">
                <el-col :span="6" v-for="(item, index) in currentSensorData" :key="index">
                  <div class="data-item">
                    <div class="data-value">{{ item.value }}{{ item.unit }}</div>
                    <div class="data-label">{{ item.label }}</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <!-- 监控视频和图表区域 -->
        <el-row :gutter="20" style="margin-top: 20px">
          <!-- 左侧监控视频 -->
          <el-col :span="12">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>实时监控</span>
                  <el-select v-model="currentCameraId" @change="handleCameraChange" style="width: 10vw" placeholder="选择摄像头">
                    <el-option v-for="device in cameraDevices" :key="device.id" :label="device.deviceName" :value="device.id" :disabled="device.status === 0">
                      <span style="float: left">{{ device.deviceName }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">
                        {{ device.status === 1 ? '在线' : '离线' }}
                      </span>
                    </el-option>
                  </el-select>
                </div>
              </template>
              <div class="video-container">
                <div class="video-player">
                  <video v-if="currentVideo" :src="currentVideo" controls autoplay @error="handleVideoError"></video>
                  <div v-else class="no-video">
                    <el-icon :size="32"><VideoCamera /></el-icon>
                    <p>{{ videoStatus }}</p>
                  </div>
                </div>
                <!-- <div class="history-videos">
                  <el-timeline>
                    <el-timeline-item v-for="record in cameraRecords" :key="record.id" :timestamp="record.recordTime" :type="record.id === currentPlayingRecord ? 'primary' : ''">
                      <el-image :src="record.thumbnailUrl" :preview-src-list="[record.videoUrl]" fit="cover" @click="playHistoryVideo(record)" />
                    </el-timeline-item>
                  </el-timeline>
                </div> -->
              </div>
            </el-card>
          </el-col>

          <!-- 右侧图表区域 -->
          <el-col :span="12">
            <el-radio-group v-model="activeChart" @change="handleTabChange" class="chart-radio-group">
              <el-radio-button label="tempHumidity">土壤温湿度</el-radio-button>
              <el-radio-button label="airTempHumidity">空气温湿度</el-radio-button>
              <el-radio-button label="co2Analysis">CO2分析</el-radio-button>
              <el-radio-button label="npk">氮磷钾含量</el-radio-button>
              <el-radio-button label="environment">环境监测</el-radio-button>
            </el-radio-group>

            <div class="chart-container">
              <el-card v-show="activeChart === 'tempHumidity'" shadow="hover">
                <div class="chart">
                  <v-chart :option="soilTempHumidityOption" :autoresize="true" />
                </div>
              </el-card>

              <el-card v-show="activeChart === 'airTempHumidity'" shadow="hover">
                <div class="chart">
                  <v-chart :option="airTempHumidityOption" :autoresize="true" />
                </div>
              </el-card>

              <el-card v-show="activeChart === 'co2Analysis'" shadow="hover">
                <div class="chart">
                  <v-chart :option="co2AnalysisOption" :autoresize="true" />
                </div>
              </el-card>

              <el-card v-show="activeChart === 'npk'" shadow="hover">
                <div class="chart">
                  <v-chart :option="npkOption" :autoresize="true" />
                </div>
              </el-card>

              <el-card v-show="activeChart === 'environment'" shadow="hover">
                <div class="chart">
                  <v-chart :option="environmentOption" :autoresize="true" />
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>

        <!-- 底部天气预报区域 -->
        <!-- <el-row style="margin-top: 20px">
          <el-col :span="24">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>天气预报</span>
                </div>
              </template>
              <div class="weather-forecast">
                <div v-for="(item, index) in weatherData" :key="index" class="weather-item">
                  <div class="date">{{ item.date }}</div>
                  <el-image :src="item.icon" class="weather-icon"></el-image>
                  <div class="temp">{{ item.temperature }}°C</div>
                  <div class="desc">{{ item.description }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row> -->
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { greenhouseApi } from '../api/greenhouse'
import { OfficeBuilding, FullScreen, Location, Monitor, VideoCamera } from '@element-plus/icons-vue'

// 注册必需的组件
use([CanvasRenderer, LineChart, BarChart, PieChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

// 响应式数据
const currentGreenhouseId = ref(null)
const currentSensorId = ref(null)
const currentCameraId = ref(null)
const greenhouses = ref([])
const currentGreenhouse = ref(null)
const deviceCount = ref(0)
const currentVideo = ref(null)
const currentSensorData = ref([
  { label: '土壤温度', value: 0, unit: '℃' },
  { label: '土壤湿度', value: 0, unit: '%' },
  { label: '氮含量', value: 0, unit: 'mg/kg' },
  { label: '磷含量', value: 0, unit: 'mg/kg' },
  { label: '钾含量', value: 0, unit: 'mg/kg' },
  { label: '电导率', value: 0, unit: 'μS/cm' },
  { label: 'pH值', value: 0, unit: '' },
  { label: '光照度', value: 0, unit: 'lux' },
  { label: 'CO2浓度', value: 0, unit: 'ppm' },
  { label: '空气温度', value: 0, unit: '℃' },
  { label: '空气湿度', value: 0, unit: '%' }
])
const cameraRecords = ref([])
const activeChart = ref('tempHumidity')

// 统一的文字样式配置
const textStyle = {
  color: '#fff'
}

// 统一的坐标轴样式配置
const axisStyle = {
  axisLine: {
    lineStyle: { color: '#fff' }
  },
  axisLabel: { color: '#fff' },
  nameTextStyle: { color: '#fff' }
}

// 图表配置
const soilTempHumidityOption = ref({
  title: {
    text: '土壤温湿度变化趋势',
    textStyle: textStyle
  },
  tooltip: {
    trigger: 'axis',
    textStyle: textStyle
  },
  legend: {
    data: ['温度', '湿度'],
    textStyle: textStyle
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    ...axisStyle
  },
  yAxis: [
    {
      type: 'value',
      name: '温度(℃)',
      ...axisStyle
    },
    {
      type: 'value',
      name: '湿度(%)',
      ...axisStyle
    }
  ],
  series: [
    {
      name: '温度',
      type: 'line',
      data: []
    },
    {
      name: '湿度',
      type: 'line',
      yAxisIndex: 1,
      data: []
    }
  ]
})

const npkOption = ref({
  title: {
    text: '氮磷钾含量变化',
    textStyle: textStyle
  },
  tooltip: {
    trigger: 'axis',
    textStyle: textStyle
  },
  legend: {
    data: ['氮', '磷', '钾'],
    textStyle: textStyle
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    ...axisStyle
  },
  yAxis: {
    type: 'value',
    name: '含量(mg/kg)',
    axisLabel: {
      formatter: '{value}'
    },
    ...axisStyle
  },
  series: [
    {
      name: '氮',
      type: 'line',
      smooth: true,
      data: []
    },
    {
      name: '磷',
      type: 'line',
      smooth: true,
      data: []
    },
    {
      name: '钾',
      type: 'line',
      smooth: true,
      data: []
    }
  ]
})

const environmentOption = ref({
  title: {
    text: '环境监测数据',
    textStyle: textStyle
  },
  tooltip: {
    trigger: 'axis',
    textStyle: textStyle
  },
  legend: {
    data: ['CO2浓度', '光照强度'],
    textStyle: textStyle
  },
  xAxis: {
    type: 'category',
    data: [],
    ...axisStyle
  },
  yAxis: [
    {
      type: 'value',
      name: 'CO2浓度(ppm)',
      ...axisStyle
    },
    {
      type: 'value',
      name: '光照强度(lux)',
      ...axisStyle
    }
  ],
  series: [
    {
      name: 'CO2浓度',
      type: 'line',
      data: []
    },
    {
      name: '光照强度',
      type: 'line',
      yAxisIndex: 1,
      data: []
    }
  ]
})

// 空气温湿度柱状图配置
const airTempHumidityOption = ref({
  title: {
    text: '空气温湿度变化趋势',
    textStyle: textStyle
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['温度', '湿度'],
    textStyle: textStyle
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      interval: 0,
      rotate: 30
    },
    ...axisStyle
  },
  yAxis: [
    {
      type: 'value',
      name: '温度(℃)',
      position: 'left',
      ...axisStyle
    },
    {
      type: 'value',
      name: '湿度(%)',
      position: 'right',
      ...axisStyle
    }
  ],
  series: [
    {
      name: '温度',
      type: 'bar',
      data: []
    },
    {
      name: '湿度',
      type: 'bar',
      yAxisIndex: 1,
      data: []
    }
  ]
})

// CO2分析饼图配置
const co2AnalysisOption = ref({
  title: {
    text: 'CO2浓度分布',
    textStyle: textStyle
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}次 ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 'middle',
    textStyle: textStyle
  },
  series: [
    {
      name: 'CO2浓度',
      type: 'pie',
      radius: '50%',
      center: ['60%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        formatter: '{b}\n{c}次 ({d}%)'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      data: []
    }
  ]
})

// 模拟天气数据
const weatherData = ref([
  {
    date: '今天',
    icon: 'sunny',
    temperature: 25,
    description: '晴天'
  },
  {
    date: '明天',
    icon: 'cloudy',
    temperature: 23,
    description: '多云'
  },
  {
    date: '后天',
    icon: 'lightning',
    temperature: 22,
    description: '雷阵雨'
  }
])

// 计算属性
const sensorDevices = computed(() => {
  return currentGreenhouse.value?.devices?.filter((d) => d.deviceType.typeName === '土壤检测仪') || []
})

const cameraDevices = ref([])

// 方法
const handleGreenhouseChange = async (id) => {
  try {
    const response = await greenhouseApi.getGreenhouseDetail(id)
    const { greenhouse, deviceCount: count } = response.data

    currentGreenhouse.value = greenhouse
    deviceCount.value = count

    // 获取摄像头设备列表
    const camerasResponse = await greenhouseApi.getCameraDevices(id)
    cameraDevices.value = camerasResponse.data

    // 自动选择第一个摄像头并加载视频流
    if (cameraDevices.value.length > 0) {
      currentCameraId.value = cameraDevices.value[0].id
      await handleCameraChange(currentCameraId.value)
    }

    // 自动选择第一个传感器和摄像头
    // if (sensorDevices.value.length > 0) {
    //   currentSensorId.value = sensorDevices.value[0].id
    //   await handleSensorChange(currentSensorId.value)
    // }
    handleSensorChange(id)
  } catch (error) {
    console.error('Failed to fetch greenhouse data:', error)
  }
}

const handleSensorChange = async (id) => {
  try {
    // 获取实时传感器数据
    const sensorResponse = await greenhouseApi.getSensorData(id)
    const sensorData = sensorResponse.data

    // 更新实时数据显示
    currentSensorData.value = [
      { label: '土壤温度', value: sensorData.soilTemperature.value, unit: sensorData.soilTemperature.unit },
      { label: '土壤湿度', value: sensorData.soilMoisture.value, unit: sensorData.soilMoisture.unit },
      { label: '氮含量', value: sensorData.nitrogen.value, unit: sensorData.nitrogen.unit },
      { label: '磷含量', value: sensorData.phosphorus.value, unit: sensorData.phosphorus.unit },
      { label: '钾含量', value: sensorData.potassium.value, unit: sensorData.potassium.unit },
      { label: '电导率', value: sensorData.conductivity.value, unit: sensorData.conductivity.unit },
      { label: 'pH值', value: sensorData.phValue.value, unit: sensorData.phValue.unit },
      { label: '光照度', value: sensorData.lightIntensity.value, unit: sensorData.lightIntensity.unit },
      { label: 'CO2浓度', value: sensorData.co2.value, unit: sensorData.co2.unit },
      { label: '空气温度', value: sensorData.airTemperature.value, unit: sensorData.airTemperature.unit },
      { label: '空气湿度', value: sensorData.airHumidity.value, unit: sensorData.airHumidity.unit }
    ]

    // 获取图表数据
    const chartResponse = await greenhouseApi.getChartData(id)
    const chartData = chartResponse.data

    // 更新时间轴数据
    const timeLabels = chartData.timeLabels

    // 更新土壤温湿度图表
    soilTempHumidityOption.value.xAxis.data = timeLabels
    soilTempHumidityOption.value.series[0].data = chartData.temperature
    soilTempHumidityOption.value.series[1].data = chartData.humidity

    // 更新氮磷钾图表
    npkOption.value.xAxis.data = timeLabels
    // 确保数据存在且为数组
    if (Array.isArray(chartData.nitrogen) && Array.isArray(chartData.phosphorus) && Array.isArray(chartData.potassium)) {
      npkOption.value.series[0].data = chartData.nitrogen
      npkOption.value.series[1].data = chartData.phosphorus
      npkOption.value.series[2].data = chartData.potassium

      // 强制更新图表
      nextTick(() => {
        const chart = document.querySelector('.chart v-chart')
        if (chart) {
          chart.__vue__?.resize()
        }
      })
    } else {
      console.warn('NPK data is not in the expected format:', chartData)
    }

    // 更新环境监测图表
    environmentOption.value.xAxis.data = chartData.timeLabels
    environmentOption.value.series[0].data = chartData.co2
    environmentOption.value.series[1].data = chartData.lightIntensity

    // 更新空气温湿度图表
    airTempHumidityOption.value.xAxis.data = timeLabels
    airTempHumidityOption.value.series[0].data = chartData.airTemperature
    airTempHumidityOption.value.series[1].data = chartData.airHumidity

    // 更新CO2分析饼图
    if (Array.isArray(chartData.co2) && chartData.co2.length > 0) {
      const co2Data = chartData.co2
      const ranges = [
        { name: '低浓度 (<400ppm)', min: 0, max: 400 },
        { name: '正常浓度 (400-600ppm)', min: 400, max: 600 },
        { name: '较高浓度 (600-800ppm)', min: 600, max: 800 },
        { name: '高浓度 (>800ppm)', min: 800, max: Infinity }
      ]

      // 计算每个范围的数据点数量
      const co2Distribution = ranges
        .map((range) => {
          const count = co2Data.filter((value) => value >= range.min && value < range.max).length
          return {
            name: range.name,
            value: count,
            itemStyle: {
              color:
                range.min === 400
                  ? '#67C23A' // 正常浓度使用绿色
                  : range.min < 400
                  ? '#409EFF' // 低浓度使用蓝色
                  : range.min < 600
                  ? '#E6A23C'
                  : '#F56C6C' // 较高和高浓度使用橙色和红色
            }
          }
        })
        .filter((item) => item.value > 0) // 只保留有数据的范围

      // 如果没有数据分布，添加一个默认项
      if (co2Distribution.length === 0) {
        co2Distribution.push({
          name: '暂无数据',
          value: 1,
          itemStyle: { color: '#909399' }
        })
      }

      co2AnalysisOption.value.series[0].data = co2Distribution

      // 强制更新图表
      nextTick(() => {
        const charts = document.querySelectorAll('.chart v-chart')
        charts.forEach((chart) => {
          if (chart.__vue__) {
            chart.__vue__.resize()
          }
        })
      })
    }
  } catch (error) {
    console.error('Failed to fetch sensor data:', error)
  }
}

const handleCameraChange = async (id) => {
  try {
    videoStatus.value = '正在连接摄像头...'
    currentVideo.value = null
    currentPlayingRecord.value = null

    // 从设备列表中获取当前选中的摄像头
    const selectedCamera = cameraDevices.value.find((camera) => camera.id === id)
    if (selectedCamera) {
      currentVideo.value = selectedCamera.videoUrl
    }

    // 获取摄像头记录
    const recordsResponse = await greenhouseApi.getCameraRecords(id)
    cameraRecords.value = recordsResponse.data.map((record) => ({
      ...record,
      recordTime: new Date(record.recordTime).toLocaleString()
    }))
  } catch (error) {
    console.error('Failed to fetch camera data:', error)
    videoStatus.value = '连接摄像头失败'
  }
}

const updateCharts = (data) => {
  // 更新土壤温湿度图表
  soilTempHumidityOption.value.series[0].data = [data.soilTemperature]
  soilTempHumidityOption.value.series[1].data = [data.soilMoisture]

  // 更新氮磷钾图表
  npkOption.value.series[0].data = [data.nitrogen]
  npkOption.value.series[1].data = [data.phosphorus]
  npkOption.value.series[2].data = [data.potassium]

  // 更新环境监测图表
  environmentOption.value.series[0].data = [data.co2]
  environmentOption.value.series[1].data = [data.lightIntensity]
}

// 添加时间显示
const currentTime = ref('')
const currentDate = ref('')

const updateDateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })
  currentDate.value = now.toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
}

// 添加新的响应式变量
const videoStatus = ref('等待选择摄像头...')
const currentPlayingRecord = ref(null)

// 添加视频错误处理方法
const handleVideoError = () => {
  videoStatus.value = '视频流加载失败'
  currentVideo.value = null
}

// 添加播放历史视频方法
const playHistoryVideo = (record) => {
  currentVideo.value = record.videoUrl
  currentPlayingRecord.value = record.id
}

// 处理标签页切换
const handleTabChange = (tabName) => {
  nextTick(() => {
    const charts = document.querySelectorAll('.chart v-chart')
    charts.forEach((chart) => {
      if (chart.__vue__) {
        chart.__vue__.resize()
      }
    })
  })
}

// 初始化
onMounted(async () => {
  try {
    // 获取大棚列表
    const response = await greenhouseApi.getAllGreenhouses()
    greenhouses.value = response.data

    // 加载第一个大棚的数据
    if (greenhouses.value.length > 0) {
      currentGreenhouseId.value = greenhouses.value[0].id
      await handleGreenhouseChange(currentGreenhouseId.value)
    }
  } catch (error) {
    console.error('Failed to initialize dashboard:', error)
  }

  updateDateTime()
  setInterval(updateDateTime, 1000)
})
</script>

<style scoped>
.dashboard {
  width: 100%;
  min-height: 100vh;
  background-color: #001529;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* 添加科技感背景网格 */
.dashboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(64, 158, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(64, 158, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 0;
}

.el-header {
  background: linear-gradient(90deg, #001529 0%, #003366 100%);
  color: white;
  line-height: 60px;
  font-size: 20px;
  border-bottom: 1px solid rgba(64, 158, 255, 0.1);
  position: relative;
  z-index: 1;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.platform-title {
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
}

.datetime {
  display: flex;
  gap: 10px;
}

.time {
  font-size: 24px;
  font-weight: bold;
}

.date {
  font-size: 14px;
  opacity: 0.8;
}

.el-main {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-content {
  text-align: left;
  height: 268px;
}

.info-content p {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-icon {
  font-size: 18px;
  color: #409eff;
}

.env-data {
  display: flex;
  flex-wrap: wrap;
}

.data-item {
  text-align: center;
  padding: 15px;
  background: rgba(64, 158, 255, 0.05);
  border: 1px solid rgba(64, 158, 255, 0.1);
  border-radius: 4px;
  margin-bottom: 5px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 添加数据项悬浮效果 */
.data-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(64, 158, 255, 0.2);
}

/* 添加数据项流光动画 */
.data-item::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(64, 158, 255, 0.1), transparent);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  text-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
}

.data-label {
  margin-top: 5px;
  color: #fffa81;
}

.video-container {
  width: 100%;
  height: 412px;
}

.video-player {
  width: 100%;
  height: 100%;
  background: rgba(0, 21, 41, 0.8);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(64, 158, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.no-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #8b8b8b;
  text-shadow: 0 0 10px rgba(64, 158, 255, 0.2);
}

.no-video .el-icon {
  margin-bottom: 10px;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000;
}

.history-videos {
  margin-top: 20px;
  max-height: 200px;
  overflow-y: auto;
  padding: 0 10px;
}

.el-timeline-item:hover {
  cursor: pointer;
}

.el-timeline-item.is-active {
  color: #409eff;
}

.el-image {
  width: 120px;
  height: 67.5px;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.el-image:hover {
  transform: scale(1.05);
}

.chart {
  height: 416px;
  width: 100%;
  position: relative;
  background: rgba(0, 21, 41, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(64, 158, 255, 0.1);
}

:deep(.el-card__body) {
  padding: 10px;
}

:deep(.echarts) {
  width: 100% !important;
  height: 100% !important;
}

.weather-forecast {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.weather-item {
  text-align: center;
}

.weather-icon {
  width: 50px;
  height: 50px;
}

.el-timeline {
  margin-top: 20px;
}

.el-image {
  width: 100px;
  height: 60px;
  border-radius: 4px;
}

.el-select-dropdown__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.device-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
}

.device-status.online {
  background-color: #67c23a;
  color: white;
}

.device-status.offline {
  background-color: #909399;
  color: white;
}

.chart-radio-group {
  margin-bottom: 12px;
  width: 100%;
  display: flex;
  /* justify-content: center; */
}

:deep(.el-radio-button__inner) {
  padding: 8px 20px;
  background: rgba(0, 21, 41, 0.5);
  border-color: rgba(64, 158, 255, 0.2);
  color: #8b8b8b;
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
  background: #409eff;
  border-color: #409eff;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
}

:deep(.el-select .el-input__inner) {
  background: rgba(0, 21, 41, 0.5);
  border: 1px solid rgba(64, 158, 255, 0.2);
  color: #fff;
}

:deep(.el-select-dropdown) {
  background: #001529;
  border: 1px solid rgba(64, 158, 255, 0.2);
  backdrop-filter: blur(10px);
}

:deep(.el-select-dropdown__item) {
  color: #8b8b8b;
}

:deep(.el-select-dropdown__item.hover) {
  background: rgba(64, 158, 255, 0.1);
}

/* 修改所有el-card的样式 */
:deep(.el-card) {
  background-color: rgba(0, 21, 41, 0.7) !important;
  border: 1px solid rgba(64, 158, 255, 0.2);
  backdrop-filter: blur(10px);
  color: #fff;
}

/* 修改el-card头部样式 */
:deep(.el-card__header) {
  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
  padding: 8px 10px;
  color: #fff;
}

/* 修改el-card内容区域样式 */
:deep(.el-card__body) {
  color: #fff;
}

/* 修改卡片内部的文字颜色 */
:deep(.card-header span) {
  color: #ffcb0d;
}

/* 修改信息文本颜色 */
.info-content p {
  color: #fff;
}

/* 确保图表区域的背景色正确 */
:deep(.chart) {
  background: transparent;
}

/* 修改图表容器的背景色 */
.chart-container .el-card {
  background-color: rgba(0, 21, 41, 0.7) !important;
}
</style>
